<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree Context Menu</title>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Tree Context Menu</h2>
<p>Right click on a node to display context menu.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
    <ul id="tt"></ul>
</div>
<div id="mm">
    <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
    <div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
    <div class="menu-sep"></div>
    <div onclick="expand()">Expand</div>
    <div onclick="collapse()">Collapse</div>
</div>
<script type="text/javascript">
    var a = [{
        "id":1,
        "text":"My Documents",
        "children":[{
            "id":11,
            "text":"Photos",
            "state":"closed",
            "children":[{
                "id":111,
                "text":"Friend"
            },{
                "id":112,
                "text":"Wife"
            },{
                "id":113,
                "text":"Company"
            }]
        },{
            "id":12,
            "text":"Program Files",
            "children":[{
                "id":121,
                "text":"Intel"
            },{
                "id":122,
                "text":"Java",
                "attributes":{
                    "p1":"Custom Attribute1",
                    "p2":"Custom Attribute2"
                }
            },{
                "id":123,
                "text":"Microsoft Office"
            },{
                "id":124,
                "text":"Games",
                "checked":true
            }]
        },{
            "id":13,
            "text":"index.html"
        },{
            "id":14,
            "text":"about.html"
        },{
            "id":15,
            "text":"welcome.html"
        }]
    }];
    $("#tt").tree({
        data:a,
        animate:true,
        onContextMenu:function(e,node){
            e.preventDefault();
            $(this).tree('select',node.target);
            $('#mm').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        }
    });
    $("#mm").menu({
        width:120
    });
    function append(){
        var t = $('#tt');
        var node = t.tree('getSelected');
        t.tree('append', {
            parent: (node?node.target:null),
            data: [{
                text: 'new item1'
            },{
                text: 'new item2'
            }]
        });
    }
    function removeit(){
        var node = $('#tt').tree('getSelected');
        $('#tt').tree('remove', node.target);
    }
    function collapse(){
        var node = $('#tt').tree('getSelected');
        $('#tt').tree('collapse',node.target);
    }
    function expand(){
        var node = $('#tt').tree('getSelected');
        $('#tt').tree('expand',node.target);
    }
</script>
</body>
</html>